<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>二次供水</title>
    <meta name="keywords" content="创客空间,后台HTML,响应式后台">
    <meta name="description" content="基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <title>首页</title>
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link rel="stylesheet" href="//static/css/index_s.css">
    <link rel="stylesheet" href="//static/css/public.css">
</head>

<body>
<div class="container-fluid" id="content" style="height: 100%;padding: 0 15px;">
    <div class="map-box">
        <div class="col-md-9 li_mnh">
            <div class="head_lader">全局预览</div>
            <div id="allmap"></div>
            <div class="input_fome">
                <div id="r-result"><input type="text" id="suggestId" size="20" value="百度"/></div>
                <div id="searchResultPanel"
                     style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                <button type="button" style="background: #3385ff;" class="button_li btn btn-primary" id="search-button"
                        data-tooltip="1">搜索
                </button>
            </div>
        </div>
        <div class="col-md-3 li_mn">
            <div class="equipment">
                <div class="tab_head">信息关注</div>
                <div class="li_bju" style="box-sizing:border-box;">
                    <div id="main" style=";height:300px;"></div>
                </div>
                <div class="li_bju" style="box-sizing:border-box;">
                    <div id="maim" style="width: 100%;height:300px;"></div>
                </div>
            </div>
            <div class="equipment">
                <div class="tab_head">设备报警</div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>时间</th>
                            <th>信息</th>
                            <th>状态</th>
                            <th>编号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item of tableList">
                            <td>23/11/2013</td>
                            <td>故障1</td>
                            <td>太原市小店区许东</td>
                            <td>0.3568947</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1t51luG5BxGrGLW4y9zu3sS6Tz8O3vAG"></script>
<script src="//static/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="//static/js/echarts.min.js"></script>
<script src="//static/js/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#content',
        data: {
            tableList:[1,2,3,4,5,6,4,5,6,4,5]
        },
    });
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("allmap");
    map.centerAndZoom("太原", 12); // 初始化地图,设置城市和地图级别

    var ac = new BMap.Autocomplete( //建立一个自动完成的对象
        {
            "input": "suggestId",
            "location": map
        });

    //设备点位数组
    var netWorkList = [
        {
            userName: '1002号泵站',
            point: {
                long: 112.607,   //经度
                lat: 37.803      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-15',
            day: 230
        },
        {
            userName: '1003号泵站',
            point: {
                long: 112.580,   //经度
                lat: 37.800      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1004号泵站',
            point: {
                long: 112.572,   //经度
                lat: 37.859      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1005号泵站',
            point: {
                long: 112.558,   //经度
                lat: 37.849      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1006号泵站',
            point: {
                long: 112.573,   //经度
                lat: 37.834      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1007号泵站',
            point: {
                long: 112.577,   //经度
                lat: 37.808      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1008号泵站',
            point: {
                long: 112.599,   //经度
                lat: 37.790      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1009号泵站',
            point: {
                long: 112.618,   //经度
                lat: 37.797      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        },
        {
            userName: '1010号泵站',
            point: {
                long: 112.566,   //经度
                lat: 37.793      //纬度
            },
            personalMarker: null,
            step: '正常',
            startTime: '2018-3-18',
            day: 120
        }
    ];

    //添加点位 添加每个设备所在点的标注
    function addUserMarker() {
        for (var i = 0; i < netWorkList.length; i++) {
            var point = new BMap.Point(netWorkList[i].point.long, netWorkList[i].point.lat);
            var icon = new BMap.Icon("equipment.png", new BMap.Size(30, 30), {anchor: new BMap.Size(7, 10)});
            var mkr = new BMap.Marker(point, {icon: icon});//创建标注
            netWorkList[i].personalMarker = mkr;
            map.addOverlay(mkr);//将标注添加到地图上
            addClickHandler(netWorkList[i], mkr); //添加事件监听
        }
    }

    //标注点事件监听
    function addClickHandler(item, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(item, e);//点击打开标注点信息窗口
        });
    }

    //点击打开标注点信息窗口
    function openInfo(item, e) {
        var long;
        var lat;
        var point;
        var sContent =
            `
                <div class="infoWindow-box">
                    <div class="infoWindow-title float-clear">
                        <span>${item.userName}</span>
                        <a class="float-right infoWindow-a" href="equipmentDetail.html">查看详情 ></a>
                    </div>
                    <div class="float-clear">
                        <img src="//static/image/pumpImg.jpg" class="float-left infoWindow-img">
                        <div class="float-left">
                            <div class="infoWindow-detail">运行状态：开</div>
                            <div class="infoWindow-detail">运行时间：${item.day}天</div>
                            <div class="infoWindow-detail">设备状态：${item.step}</div>
                            <div class="infoWindow-detail">进口压力：1.8MPA</div>
                        </div>
                    </div>
                </div>
                `;
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        if (e) {
            long = e.target.getPosition().lng;
            lat = e.target.getPosition().lat
        } else {
            long = item.point.long;
            lat = item.point.lat;
        }
        point = new BMap.Point(long, lat);
        map.openInfoWindow(infoWindow, point); //开启信息窗口
        //图片加载完毕重绘infowindow
        document.getElementsByClassName('infoWindow-img').onload = function () {
            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        };
        map.panTo(point);                       //将地图中心移动到当前选择点位
    }

    //鼠标放在下拉列表上的事件
    ac.addEventListener("onhighlight", function (e) {
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });
    var myValue;
    //鼠标点击下拉列表后的事件
    ac.addEventListener("onconfirm", function (e) {
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    //搜索功能
    function setPlace() {
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp)); //添加标注
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    };
    map.centerAndZoom(new BMap.Point(112.586, 37.886), 11);
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    map.setCurrentCity("太原"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);
    var local = new BMap.LocalSearch(map, {
        renderOptions: {
            map: map
        }
    });

    //添加每个设备所在点的标注
    addUserMarker()
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var mhChart = echarts.init(document.getElementById('maim'));
    //  颜色集合
    var data = [
        {
            value: 480,
            name: '正常'
        }, {
            value: 13,
            name: '故障'
        }, {
            value: 12,
            name: '维护'
        }
    ];
    option = {
        title: {
            text: '在线设备',
            subtext: '1710',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16
            },
        },
        legend: {
            orient: 'horizontal',
            bottom: '0%',
            data: ['正常', '故障', '维护'],
            formatter: function (name) {
                var oa = option.series[0].data;
                var num = oa[0].value + oa[1].value + oa[2].value;
                for (var i = 0; i < option.series[0].data.length; i++) {
                    if (name == oa[i].name) {
                        return name + '' + oa[i].value;
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: ['40%', '58%'],
            color: ['#6aa4d9', '#c3c3c3', '#ff0000'],
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data
        }]
    };
    myChart.setOption(option, true);
    window.onresize = myChart.resize;
    mhChart.setOption(option, true);
    window.onresize = mhChart.resize;
</script>

</html>